import React, {useState} from 'react'
import { View, Text, SafeAreaView, Switch, StyleSheet, TouchableHighlight } from 'react-native'
import {Button, WingBlank, WhiteSpace} from '@ant-design/react-native'
import { Logout, ConsumerConfig } from '../../store/reducer/user'
import {useDispatch, useSelector} from 'react-redux'
import { useNavigation } from '@react-navigation/native'
import { themes } from '../../theme'
import { Avatar } from '../../components'
import { pxToPt } from '../../utils'

export default function index() {
  const dispatch = useDispatch()
  const userConfig = useSelector(state=> state.user.currentUserConfig)
  const navigation = useNavigation()
  const [themeEnabled, setThemeEnabled] = useState(false);
  const user = useSelector(state=>state.user.currentUser)
  const themeSwitch = () => {
    setThemeEnabled(previousState => {
    dispatch(ConsumerConfig({theme: !previousState? 'dark': 'light'}))
    return !previousState
    });
  }
  const logout = async () => {
    const res = await dispatch(Logout())
    if(res.success) {
      navigation.reset({
        index: 0,
        routes: [
          {
            name: 'Login'
          }
        ]
      })
    return
  }
}
// alert(JSON.stringify(userConfig))
// alert(JSON.stringify(themes[userConfig['theme']]))
// alert(JSON.stringify(userConfig))
  return (
    <SafeAreaView style={{flex: 1 ,backgroundColor: themes[userConfig['theme']].bg}}>
      <WingBlank>
        <TouchableHighlight onPress={navigation.navigate.bind(this, 'ProfileSettings')}>
          <View style={styles.userInfo}>
            <Avatar style={styles.avatar} />
            <Text style={styles.username}>{user?.username}</Text>
          </View>
        
        </TouchableHighlight>
        
        <WhiteSpace />
        <View style={styles.toggleTheme}>
          <Text>当前主题为Light</Text>
          <Switch
            trackColor={{ false: "#767577", true: "#81b0ff" }}
            thumbColor={themeEnabled ? "#f5dd4b" : "#f4f3f4"}
            ios_backgroundColor="#3e3e3e"
            onValueChange={themeSwitch}
            value={themeEnabled}
          />
        </View>
        <WhiteSpace />
        <Button onPress={logout} type="warning">退出登录</Button>
    </WingBlank>

    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  userInfo: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center'
  },
  avatar: {
    height: pxToPt(50),
    width: pxToPt(50),
    marginRight: pxToPt(20)
  },
  username: {
    flex: 1
  },
  toggleTheme: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
    // flex: 1
  }
})
